// pages/retail/shop/setting.js

import api from '../../../utils/api';
import message from '../../../utils/message';

import WeCropper from '../../../commons/we-cropper/we-cropper';
const device = wx.getSystemInfoSync() // 获取设备信息
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
const height = device.windowHeight

Page({

    /**
     * 页面的初始数据
     */
    data: {

        retail_id: null,
        has_load: false,
        shop_info: null,
        scale:1,
        cropperOpt: {
            id: 'cropper', // 用于手势操作的canvas组件标识符
            targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符
            pixelRatio: device.pixelRatio, // 传入设备像素比
            width, // 画布宽度
            height, // 画布高度
            src: '',
            scale: 2.5, // 最大缩放倍数
            zoom: 8, // 缩放系数
            cut: {
              x: (width - 275) / 2, // 裁剪框x轴起点
              y: (width - 275) / 2, // 裁剪框y轴起点
              width: 275, // 裁剪框宽度
              height: 275 // 裁剪框高度
            }
          }

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

        if(options.id){
            this.setData({
                retail_id:  options.id
            })
            this.getShopInfo();
        }



          var cropperOpt = this.data.cropperOpt;
          cropperOpt.src = "http://192.168.1.5:8999/web/Upload/wxedd9501e7e6d262a/category_icon/62446792e9a27.png";
          if (cropperOpt.src) {
            this.cropper = new WeCropper(cropperOpt)
              .on('ready', (ctx) => {
                console.log(`wecropper is ready for work!`)
              })
              .on('beforeImageLoad', (ctx) => {
                wx.showToast({
                  title: '上传中',
                  icon: 'loading',
                  duration: 3000
                })
              })
              .on('imageLoad', (ctx) => {
                wx.hideToast()
              })
          }

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        
    },
    getShopInfo:function () {
        var me = this;

        var params = {};
        params.retail_id = this.data.retail_id;
        api.retail.getRetailShopInfo( params , function( response ){

            if(response.status==1){
                me.setData({
                    shop_info: response.data,
                    has_load:true
                })
            }else{
                message.show_error( response.message )
            }
            
        })   
    },
    // 插件通过touchStart、touchMove、touchEnd方法来接收事件对象。
  touchStart(e) {
    this.cropper.touchStart(e)
  },
  touchMove(e) {
    this.cropper.touchMove(e)
  },
  touchEnd(e) {
    this.cropper.touchEnd(e)
  },
  // 自定义裁剪页面的布局中，可以重新选择图片
  uploadTap() {
    const self = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success(res) {
        const src = res.tempFilePaths[0]
        self.cropper.pushOrign(src)
      }
    })
  },

  // 生成图片
  getCropperImage() {
    this.cropper.getCropperImage(tempFilePath => {
      // tempFilePath 为裁剪后的图片临时路径
      if (tempFilePath) {
        wx.setStorageSync('avatar', tempFilePath)
        // 拿到裁剪后的图片路径的操作
        wx.navigateBack({
          delta: 1,
        })
      } else {
        console.log('获取图片地址失败，请稍后重试')
      }
    })
  }
})